<template>
  <div class="employment-industry-two">
    <echarts-temp :options="options"></echarts-temp>
  </div>
</template>
<script>
export default {
  name: 'EmploymentIndustryTwo',

  data() {
    return {
      options: {}
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    getInitData() {
      var myColor = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#8b78f6']
      // 制定配置项和数据
      this.options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          confine: true
        },

        grid: {
          top: '10%',
          left: '22%',
          bottom: '10%'
        },
        xAxis: {
          show: false,
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: [
          {
            type: 'category',
            inverse: true, // 是否是反向坐标轴
            // 不显示y轴线条
            axisLine: { show: false },
            // 不显示刻度
            axisTick: {
              show: false
            },
            // 修改刻度标签相关样式
            axisLabel: {
              color: '#fff'
            },
            data: ['HTML5', 'CSS3', 'javascript', 'VUE', 'NODE']
          },
          {
            // 不显示y轴线条
            axisLine: { show: false },
            inverse: true,
            // 不显示刻度
            axisTick: {
              show: false
            },
            // 修改刻度标签相关样式
            axisLabel: {
              color: '#fff'
            },
            data: ['702', '350', '610', '793', '664']
          }
        ],
        series: [
          {
            name: '条',
            type: 'bar',
            yAxisIndex: 0,
            data: [70, 34, 60, 78, 69],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 20,
              // 此时的color可以修改不同柱子的颜色
              color: function(params) {
                // params传进来的是柱子对象
                // console.log(params)
                // dataIndex是当前柱子的引号
                return myColor[params.dataIndex]
              }
            },
            // 柱子间的距离
            barCategoryGap: 50,
            // 柱子的宽度
            barWidth: 10,
            // 显示柱子内的文字
            label: {
              normal: {
                show: true,
                // 图形内显示
                position: 'inside',
                // 文字的显示格式
                formatter: '{c}%'
              }
            }
          },
          {
            name: '框',
            type: 'bar',
            barCategoryGap: 50,
            barWidth: 15,
            yAxisIndex: 1,
            data: [100, 100, 100, 100, 100],
            itemStyle: {
              color: 'none',
              borderColor: '#00c1de',
              borderWidth: 3,
              barBorderRadius: 15
            }
          }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.employment-industry-two {
  height: 100%;
  height: 100%;
}
</style>
